<template>
  <div>
     <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
     <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
     <el-breadcrumb-item>商品管理</el-breadcrumb-item>
     <el-breadcrumb-item>商品分类</el-breadcrumb-item>
     </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <el-row>
        <el-col><el-button type="primary" @click="addgoodslist">添加商品</el-button></el-col>
      </el-row>
      <el-row>
        <el-col>
          <tree-table :data='getgoodslist'
         :columns="columns"
         show-index
         index-text='#'
         border 
         :selection-type='false'
         :expand-type='false'>
         <template slot="isok" slot-scope="scope">
           <i class="el-icon-success" style="color:#67C23A" v-if="scope.row.cat_deleted===false"></i>
           <i class="el-icon-error" style="color:red" v-else></i>
         </template>
         <template slot='level' slot-scope="scope">
           <el-tag v-if="scope.row.cat_level ===0">一级</el-tag>
           <el-tag v-else-if='scope.row.cat_level ===1' type="success">二级</el-tag>
           <el-tag v-else type="warning">三级</el-tag>
         </template>
         <template  slot="operate" slot-scope="scope">
           <el-button type="primary" icon="el-icon-edit" size='small' @click="editroles(scope.row)">编辑</el-button>
           <el-button type="danger" icon="el-icon-delete"  size='small'  @click='removerole(scope.row)'>删除</el-button>        
         </template>
         </tree-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
        <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="goodscatslist.pagenum"
         :page-sizes="[2, 5, 10, 15]"
          :page-size="goodscatslist.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
         :total="parseInt(totalPagnum)">
    </el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <!-- 添加商品对话框 -->
    <el-dialog
    title="添加商品"
    :visible.sync="addgoodsdialog"
    width="50%"
    @close='clearnfrom'>
  <el-form :model="addgoodsinfo" :rules="rules" ref="addgoodsinforef" label-width="100px" class="demo-ruleForm">
  <el-form-item label="商品名称"  prop="cat_name">
    <el-input v-model="addgoodsinfo.cat_name" ></el-input>
  </el-form-item>
  <el-form-item label="父级分类">
    <!--:props :配置对象  -->
    <el-cascader
    v-model="catsidarr"
    :options="goodslistinfo"
    :props="goodsprops"
    @change="goodsparentchange"
    clearable></el-cascader>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addgoodsdialog = false">取 消</el-button>
    <el-button type="primary" @click="postaddgoodsfrom">确 定</el-button>
  </span>
   </el-dialog>
   <!-- 编辑分类 -->
    <el-dialog
    title="修改商品"
    :visible.sync="editgoodsdialog"
    width="50%"
    @close='aditclearnfrom'>
  <el-form :model="editgoodsinfo" :rules="rules" ref="aditgoodsinforef" label-width="100px" class="demo-ruleForm">
  <el-form-item label="商品名称"  prop="cat_name">
    <el-input v-model="editgoodsinfo.cat_name" ></el-input>
  </el-form-item>
  
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editgoodsdialog = false">取 消</el-button>
    <el-button type="primary" @click="postaditgoodsfrom">确 定</el-button>
  </span>
   </el-dialog>
  </div>
</template>

<script>
  export default {
    name:'goodscatas',
    data () {
      return {
        goodscatslist:{
          type:3,
          pagenum:1,
          pagesize:5
        },
        getgoodslist:[],
        totalPagnum:'',
        //添加商品的对话框显示隐藏
        addgoodsdialog:false,
        addgoodsinfo:{
          //将要添加分类名称
          cat_name:'',
          //分类等级
          cat_level:0,
          //父级分类的id
          cat_pid:0
        },
        editgoodsinfo:{},
        editgoodsdialog:false,
        userinfo:{},
        goodslistinfo:[],
        goodsprops:{
          expandTrigger: 'hover',
          value:'cat_id',
          label:'cat_name',
          children:'children',
          checkStrictly:true
        },
        catsidarr:[],
        rules:{
          cat_name:[
              { required: true, message: '请输入商品名称', trigger: 'blur' }
          ]
        },
        //设置一列的数据
        columns:[
          {
            //列名
            label:'分类名称',
            //数据源
            prop:'cat_name'
          },{   
            label: '是否有效',
            //当前定义为模板类型
            type: 'template',
            //模板名称
            template: 'isok',
          },{
            label:'排序',
            type: 'template',
            template: 'level',
          },
          {   
            label: '操作',
            type: 'template',
            template: 'operate',
          }
        ],
      
      }
    },
  created () {
    this.getgoodscats()
  },
  methods: {
  // 获取商品列表数据
  async getgoodscats(){
    const res = await this.$http.get('categories',{params:this.goodscatslist})
    // console.log(res)
    if(res.data.meta.status !=200){return  this.$message({showClose: true,message: `获取商品列表失败`,type: 'error'})}
   this.getgoodslist = res.data.data.result
   this.totalPagnum=res.data.data.total
    
  },
  handleSizeChange(val){
    this.goodscatslist.pagesize=val
    this.getgoodscats()
  },
  handleCurrentChange(val){
   this.goodscatslist.pagenum=val
   this.getgoodscats()
  },
  //添加列表的显示框
  addgoodslist(){
    this.addgoodsdialog=true
    this.addgoodsfrom()
  },
  //获取添加商品的数据
  async addgoodsfrom(){
    const res= await this.$http.get('categories',{params:{type:2}})
    if(res.data.meta.status !=200){
      return  this.$message({showClose: true,message: `获取商品列表数据失败`,type: 'error'}) 
    }
      this.goodslistinfo=res.data.data
  },
  //练级选择器发生改变时
  goodsparentchange(){
   if(this.catsidarr.length>0){
     this.addgoodsinfo.cat_pid=this.catsidarr[this.catsidarr.length-1]
     this.addgoodsinfo.cat_level=this.catsidarr.length
   }else{
     this.addgoodsinfo.cat_pid=0
     this.addgoodsinfo.cat_level=0
   }
  },
  //提交表格数据
  async postaddgoodsfrom(){
      const validate = await this.$refs.addgoodsinforef.validate()
      if(!validate) return
     const result= await this.$http.post('categories',this.addgoodsinfo)
     console.log(result)
     if(result.data.meta.status !=201){
       return this.$message({showClose: true,message: `添加商品失败`,type: 'error'})
     }
      this.$message({showClose: true,message: `添加商品成功！`,type: 'success'})
      this.getgoodscats()
      this.addgoodsdialog = false
  },
  //清空数据表单数据
  clearnfrom(){
    this.$refs.addgoodsinforef.resetFields()
 
    this.catsidarr=[]
    this.addgoodsinfo.cat_level=0
    this.addgoodsinfo.cat_pid=0
  },
  //删除分类
  async removerole(userinfo){
    const result= await this.$http.delete(`categories/${userinfo.cat_id}`)
     if(result.data.meta.status !=200){return this.$message({showClose: true,message: `删除商品失败`,type: 'error'})}
      this.$message({showClose: true,message: `添加商品成功！`,type: 'success'})
      this.getgoodscats()
     
  },
  //编辑分类
  async editroles(userinfo){
    this.userinfo=userinfo
    this.findgoodslist()
    this.editgoodsdialog = true
  },
  //查找分类
  async findgoodslist(){
    const result = await this.$http.get(`categories/${this.userinfo.cat_id}`)
    if(result.data.meta.status !=200){
      return  this.$message({showClose: true,message: `查找商品信息失败`,type: 'error'})
    }
    this.editgoodsinfo=result.data.data
  },
  //提交分类表单
  async postaditgoodsfrom(){
   const result= await this.$http.put(`categories/${this.userinfo.cat_id}`,{cat_name:this.editgoodsinfo.cat_name})
   console.log(result)
   if(result.data.meta.status !=200){
      return  this.$message({showClose: true,message: `修改商品信息失败`,type: 'error'})
   }
  this.$message({showClose: true,message: `修改商品信息成功`,type: 'success'})
  this.getgoodscats()
  this.editgoodsdialog = false
  },
  //清除表单信息
  aditclearnfrom(){
     this.$refs.aditgoodsinforef.resetFields()
  }
  }
  }
</script>

<style lang="less" scoped>
 .el-breadcrumb{
   margin-bottom: 10px;
 }
 .el-pagination{
   margin-top: 10px;
 }
 .el-button{
   margin-bottom: 10px;
 }
 .el-cascader{
   width: 100%;
 }
</style>